<template>
    <div class="container">
        <div class="toptitle">
            <div class="titletext">卫星遥感</div>
            <hr />
        </div>
        <div class="map">
            <!-- 在左侧加载地图 -->
            <MAP :longitude="longitude" :latitude="latitude" style="margin-left: 10px;width: 99%;height: 99%;"/>
        </div>
    </div>
</template>

<script setup>
import MAP from '@/components/GPS/components/Satellite/index.vue'; // 引入地图组件
import { inject, ref, watch } from 'vue';
import useOperationStore from '../../../../../store/operation';

// 切换业务的数据对接处理
let operationStore=useOperationStore()
let operationId = ref(operationStore.data.length>0?operationStore.data[operationStore.index].id:'')
let latitude=ref(operationStore.data.length>0?operationStore.data[operationStore.index].latitude:null)
let longitude=ref(operationStore.data.length>0?operationStore.data[operationStore.index].longitude:null)
let operationName=ref(operationStore.data.length>0?operationStore.data[operationStore.index].Name:null)
operationStore.$subscribe(async(mutation, state)=>{
  operationId.value=operationStore.data[operationStore.index].id
  operationName.value=operationStore.data.length>0?operationStore.data[operationStore.index].Name:null
  latitude.value=operationStore.data.length>0?operationStore.data[operationStore.index].latitude:null
  longitude=operationStore.data.length>0?operationStore.data[operationStore.index].longitude:null
})

</script>

<style lang="scss" scoped>
.container {
    flex: 1;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    
    .toptitle {
        margin-top: 10px;
        margin-left: 20px;
        margin-right: 20px;
  
        .titletext {
        border-left: 3px solid var(--primary-color);
        padding-left: 20px;
        }
    
        hr {
        background-color: rgb(194, 194, 194);
        height: 1px;
        border: none;
        }

    }
    .map {
    flex: 1; /* 动态占用剩余空间 */
    height: 100%; /* 高度占满父容器 */
    // border: 1px solid #ccc;
    border-radius: 8px;
    position: relative;
  }
}
</style>